"use client";

import { Typography, Divider, Tag, Space } from "antd";
import { type Task, type Step } from "@prisma/client";
import dayjs from "dayjs";

const { Title, Paragraph } = Typography;

interface TaskDetailProps {
  task: Task & {
    steps?: Step[];
    content?: string | null;
    priority: "LOW" | "MEDIUM" | "HIGH";
    status: "NOT_STARTED" | "IN_PROGRESS" | "COMPLETED";
    dueDate?: Date | null;
  };
}

export function TaskDetail({ task }: TaskDetailProps) {
  const getPriorityTag = (priority: Task["priority"]) => {
    const config = {
      HIGH: { color: "red", text: "高优先级" },
      MEDIUM: { color: "orange", text: "中优先级" },
      LOW: { color: "green", text: "低优先级" },
    };
    return <Tag color={config[priority].color}>{config[priority].text}</Tag>;
  };

  const getStatusTag = (status: Task["status"]) => {
    const config = {
      NOT_STARTED: { color: "default", text: "未开始" },
      IN_PROGRESS: { color: "processing", text: "进行中" },
      COMPLETED: { color: "success", text: "已完成" },
    };
    return <Tag color={config[status].color}>{config[status].text}</Tag>;
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <Title level={2}>{task.title}</Title>
        <Space>
          {getPriorityTag(task.priority)}
          {getStatusTag(task.status)}
        </Space>
      </div>

      {task.description && (
        <>
          <Title level={4}>任务描述</Title>
          <Paragraph>{task.description}</Paragraph>
        </>
      )}

      {task.content && (
        <>
          <Title level={4}>任务内容</Title>
          <Paragraph>{task.content}</Paragraph>
        </>
      )}

      {task.dueDate && (
        <Paragraph>
          <strong>截止日期：</strong> {dayjs(task.dueDate).format("YYYY-MM-DD")}
        </Paragraph>
      )}

      {task.steps && task.steps.length > 0 && (
        <>
          <Divider />
          <Title level={3}>任务步骤</Title>
          <div className="space-y-4">
            {task.steps.map((step, index) => (
              <div key={step.id} className="border rounded-lg p-4">
                <Title level={4}>步骤 {index + 1}: {step.title}</Title>
                {step.description && (
                  <Paragraph>{step.description}</Paragraph>
                )}
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
} 